Reland "[ScrollTimeline] Support composited scroll-linked Web Animation" This is a reland of 3254ad50926dbbd809cfa45b611d9081772ce7e8 The patch was reverted due to a test being flaky on debug build. It tests the behavior that when an animation gets cancelled the other animation that shares the same ScrollTimeline still work correctly. However, the test is flaky even when no animation gets cancelled. Suspecting it's related to how the test is written. The only change from the original patch is adding the flaky test to TestExpectation. TBR=majidvp@chromium.org, bokan@chromium.org Original change's description: > [ScrollTimeline] Support composited scroll-linked Web Animation > > This patch integrates ScrollTimeline with cc::Animation. Major changes > include: > 1. blink::ScrollTimeline is able to create its compositor counterpart > 2. cc::ScrollTimeline is attached to cc::AnimationHost upon creation > 3. cc::AnimationHost ticks animations based on their timeline type > 4. Remove scroll_timeline_ from cc::WorkletAnimation and use the unified > animation_timeline_. > 5. Added virtual/threaded/external/wpt/scroll-animations/. > > See [1] for more details. > [1] https://docs.google.com/document/d/1RpJrYIDYHvtu0ia1vPv_EhBfan428QZ2sgsFhtnXb20/edit?usp=sharing > > To sheriffs: if any virtual tests become flaky, please add them to > TestExpectation instead of reverting the change. > > Bug: 1023508 > Change-Id: Ib4aa853bda34ce9b2c0abc943be9f99ac81e799a > Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2084088 > Commit-Queue: Yi Gu <yigu@chromium.org> > Reviewed-by: David Bokan <bokan@chromium.org> > Reviewed-by: Majid Valipour <majidvp@chromium.org> > Cr-Commit-Position: refs/heads/master@{#749389} Bug: 1023508 Change-Id: Ic91414c192c519ca4943b58ea57f94f5b076dd0a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2103293 Reviewed-by: Yi Gu <yigu@chromium.org> Commit-Queue: Yi Gu <yigu@chromium.org> Cr-Commit-Position: refs/heads/master@{#750336} diff --git a/scroll-animations/animation-with-display-none.html b/scroll-animations/animation-with-display-none.html new file mode 100644 index 0000000..310cb5f --- /dev/null +++ b/scroll-animations/animation-with-display-none.html
@@ -0,0 +1,74 @@ +<html class="reftest-wait"> +<title>Scroll timeline with Web Animation and transition from display:none to display:block</title> +<link rel="help" href="https://drafts.csswg.org/scroll-animations/"> +<meta name="assert" content="Scroll timeline should properly handle going from display:none to display:block"> +<link rel="match" href="animation-ref.html"> + +<script src="/web-animations/testcommon.js"></script> +<script src="/common/reftest-wait.js"></script> + +<style> + #box { + width: 100px; + height: 100px; + background-color: green; + } + + #covered { + width: 100px; + height: 100px; + background-color: red; + } + + #scroller { + overflow: auto; + height: 100px; + width: 100px; + will-change: transform; /* force compositing */ + } + + .removed { + display: none; + } + + #contents { + height: 1000px; + width: 100%; + } +</style> + +<div id="box"></div> +<div id="covered"></div> +<div id="scroller"> + <div id="contents"></div> +</div> + +<script> + const box = document.getElementById('box'); + const effect = new KeyframeEffect(box, + [ + { transform: 'translateY(0)', opacity: 1 }, + { transform: 'translateY(200px)', opacity: 0 } + ], { + duration: 1000, + } + ); + + const scroller = document.getElementById('scroller'); + scroller.classList.add('removed'); + const timeline = new ScrollTimeline({ scrollSource: scroller, timeRange: 1000, orientation: 'block' }); + const animation = new Animation(effect, timeline); + animation.play(); + + waitForAnimationFrames(2).then(_ => { + scroller.classList.remove('removed'); + animation.ready.then(() => { + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = 0.5 * maxScroll; + + waitForAnimationFrames(2).then(_ => { + takeScreenshot(); + }); + }); + }); +</script> 